<template lang="html">
  <div>
    <slot></slot>
    <el-table
      :data='tableData'
      :header-cell-style='{"backgroundColor":"#eee","padding":0}'>
      <!-- <el-table-column
        type="selection"
        width="55">
      </el-table-column> -->
      <el-table-column
        v-for='(val,key) in labelList'
        :label='val'
        :key='key'
        :prop='key'
        align="center"
        :sortable='/time/.test(key) || /count/.test(key) ? true : false'
        :render-header="labelHead">
        <template slot-scope='scope'>
          <span v-if='/sj/.test(key)'>{{!!scope.row[key] && scope.row[key] !== 0 ? new Date(scope.row[key])._toLocaleString() : ''}}</span>
          <span v-else-if='/^fcrq$/.test(key)'>{{!!scope.row[key] && scope.row[key] !== 0 ? new Date(scope.row[key])._toLocaleString().split(' ')[0] : ''}}</span>
          <span v-else>{{scope.row[key]}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label='操作'
        width='50'
        v-if='control'>
        <template slot-scope='scope' >
          <el-button type='text'
          @click='openDetail(scope.row)'>
          	查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props : {
    labelList : Object,
    tableData : Array,
    control : {
      type : Boolean,
      default : true
    }
  },
  data(){
    return {

    }
  },
  watch: {
    'tableData'(){
      // console.log(this.tableData);
    }
  },
  methods : {
    labelHead(h, { column, $index }){
      let _length;
      let _fontSize = 14;
      //微调宽度
      switch (column.property) {
        case 'identify':
        _length = 5;
        break
        case 'casenum':
        _length = 5;
        break
        default :
        _length = column.label.length;
      }
      column.minWidth = _fontSize*(_length + 1);
      return h('div',{class:'table-head',style:{width:'100%',lineHeight:'40px',fontSize:'14px'}},[column.label])
    },
    openDetail(scope){
      this.$emit('open-detail',scope)
    },
  }
}
</script>

<style lang="scss" scoped>
  .small {
    width: 60px;
  }
</style>
